<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js8.4 dom尺寸演示代码</title>
		<style type="text/css">
			*{
				
			}
			div{
				border: #000000 solid 5px;
				
			}
			/*内联样式的宽高不能被元素的style.height获取到*/
			#div2{
				width: 300px;
				height: 200px;
			}
			.divGlobal {
				width: 900px;
				height: 300px;
			}
			#div1{
				overflow: scroll;
				height: 300px;
				border-color: #8A2BE2;
			}
			#div4{
				height: 200px;
				width: 500px;
				margin: 0px;
				padding: 10px;
				outline: #0000FF solid 10px;
			}
			#div5{
				height: 100px;
				width: 200px;
				border: 10px solid #0000FF;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="showScroll()">点击测试滚动</button>
		<div style="width: 70%;">
			<div id="div1">
				<img src="../../20190305/imgs/1.jpeg" />
			</div>
			<div id="div2" style="width: 200px; height: 200px;">
				
			</div>
		
		</div>
		<div id="div4" style="height: 350px;">
			<div id="div4_1" style="margin-top: 100px;">
				<div id="div4_1_1">
					
				</div>
			</div>
		</div>
		<div id="div5">
		</div>
		<script type="text/javascript">
			
			function showlog(txt){
				console.log(txt);
			}
			var div1 = document.getElementById('div1');
			var div2 = document.getElementById('div2');
			// 元素的style.width和style.height只能获取行内的样式
			showlog('未设置div宽高:' + div1.style.width + ":" + div1.style.height);
			showlog('已设置div宽高:' + div2.style.width + ":" + div2.style.height);
			
			showlog("通过计算的方法获取元素宽高")
			showlog("获取未设置宽高的div尺寸")
			var style = window.getComputedStyle ? window.getComputedStyle(div1, null) : null || div1.currentStyle;
			console.log(style.width + ":" + style.height);		
			showlog("获取已设置宽高的div尺寸")
			var style = window.getComputedStyle ? window.getComputedStyle(div2, null) : null || div2.currentStyle;
			console.log(style.width + ":" + style.height);
			
			showlog('获取行内或外链样式')
			var sheet = document.styleSheets[0];            // 获取link或style;
			// document.styleSheets[0].cssRules可以得到内联样式或外链样式的每一条css选择器
			var rule = (sheet.cssRules || sheet.rules)[0];  // 获取第一条规则;
			console.log(rule.style.width + ':' + rule.style.height);
			
			showlog('通过clientWidth和clientHeight获取元素宽高。')
			/*
			会加上内边距。忽略border宽度和外边距
			*/
		   showlog(div1.clientHeight + ':' + div1.clientWidth);
		   
		   var div4 = document.getElementById('div4');
		   showlog("scrollHeight:scrollWidth")
		   // 会的到计算后的结果,不会加上border的宽度
		   showlog(div4.scrollHeight + ':' + div4.scrollWidth);
		   
		   
		   showlog("offsetHeight:offsetWidth")
		   // 会返回元素实际的宽高,包含四个边框的宽度。不包含外边距.包含内边距,不包含outline
		   showlog(div4.offsetHeight + ':' + div4.offsetWidth);
		   
		   // 左边框和上边框的大小
		   showlog("clientLeft:clientTop")
		   showlog(div4.clientLeft +':' + div4.clientTop);
		   
		   // 相对于父容器左侧和顶部的距离.单位为像素
		   // 边距会影响此值
		   showlog('div4.offsetLeft:div4.offsetTop')
		   showlog(div4.offsetLeft + ":" + div4.offsetTop)
		   
		   showlog('offsetParent可以得到父容器')
		   // body 是顶层容器.body的父容器为null
		   showlog(div4.offsetParent);
		   
		   var div41 = document.getElementById('div4_1');
		   showlog('div41.offsetLeft:div41.offsetTop')
		   // 子元素的offsetTop会计算父容器的内边距
		   showlog(div41.offsetLeft + ":" + div41.offsetTop)
		   
		   var div411 = document.getElementById('div4_1_1');
		   showlog('使用自定义函数来获取嵌套多层的元素偏移量')
		   showlog(getOffsetLeft(div411));
		   
    		// 如果多层的话,就必须使用循环或递归;
			function getOffsetLeft(element){
			   var left = element.offsetLeft; // 得到第一层距离;
			   var parent = element.offsetParent; // 得到第一个父元素;
			   while(parent !== null){ // 判断如果还有上一层父元素;
				   left += parent.offsetLeft; // 将得到的距离累加;
				   parent = parent.offsetParent; // 将父元素也回溯;
			   }   // 然后循环;
			   return left; // 得到最终距离;
			}
			
			function showScroll(){
				showlog("使用scrollTop和scrollLeft获取和设定滚动条位置.位置是指相对于top或left的位置")
				showlog("div1默认的滚动条位置")
				showlog(div1.scrollTop + ":" + div1.scrollLeft);
				showlog("div1纵向滚动条移动到100像素的位置")
				// 等号是设定距离对应窗口边缘的像素位置
				div1.scrollTop = 200;
				showlog(div1.scrollTop + ":" + div1.scrollLeft);
				// 使用+=或-=可以设置相对于当前位置的位置
				div1.scrollTop -= 50;
				showlog(div1.scrollTop + ":" + div1.scrollLeft);
				
			}
			
			showlog("使用getBoundingClientRect()获取针对页面边缘的边距")
			var box = document.getElementById('div4');
			showlog(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离;
			showlog(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离;
			showlog(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离;
			showlog(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离;
			
			// 获取元素针对窗口边缘的距离.单位为像素.与getBoundingClientRect兼容
			function getRect(element){
			   var rect = element.getBoundingClientRect();
			   var top = document.documentElement.clientTop;
			   var left = document.documentElement.clientLeft;
			   return {
				   top:rect.top-top, // 元素上边距-页面的上边距(0-0或2-2);
				   bottom:rect.bottom-top,
				   left:rect.left-left, // 元素左边距-页面的左边距(0-0或2-2);
				   right:rect.right-left
			   }
			}; 
			
			showlog("使用自定义方法getRect来获取元素边距")
			var result = getRect(div4);
			showlog(result);
		</script>
	</body>
</html>
